<template>
  <div class="main">
    <div class="top">
      <div class="logo"></div>
      <div class="title"></div>
    </div>
    <div class="loginDiv">
      <el-tabs
        v-model="activeName"
        class="demo-tabs"
        @tab-click="handleClick"
        v-if="status == 0"
      >
        <el-tab-pane label="验证码登录" name="verify">
          <el-input
            v-model="verifyForm.phone"
            placeholder="手机号码"
            maxlength="11"
          ></el-input>
          <el-input
            v-model="verifyForm.verify"
            placeholder="短信验证码"
            maxlength="6"
            class="verifyInput"
          ></el-input>
          <el-button
            :class="[
              'verifyButton',
              verifyDisabled ? 'disabledVerify' : 'activeVerify',
            ]"
            @click="getVerify"
            :disabled="verifyDisabled"
            >{{ verifyCodeText }}</el-button
          >
          <el-button class="login">登录</el-button>
        </el-tab-pane>
        <el-tab-pane label="密码登录" name="password"></el-tab-pane>
      </el-tabs>
      <div class="verifyImage" v-if="status == 1">
        <drag-image
          @ok="passTologin"
          class="dragImage"
          @close="dragClose"
        ></drag-image>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { TabsPaneContext } from "element-plus";
import DragImage from "./dragImage.vue";
import { VERIFY_TIME } from "./data.ts";
// 控制显示登录||图片验证
const status = ref(0);
const activeName = ref("verify");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const verifyForm = reactive({
  phone: "",
  verify: "",
});
const verifyCodeText = ref("获取验证码");
const verifyDisabled = ref(false);
const time = ref(VERIFY_TIME);
//获取短信验证码
const getVerify = () => {
  if (verifyForm.phone.length > 0 && verifyForm.phone.length === 11) {
    resetVerifyCode();
  } else {
    ElMessage({
      message: "请输入手机号码",
      type: "warning",
    });
  }
};
// 短信验证码倒计时
const resetVerifyCode = () => {
  // this.time = VERIFY_TIME;
  // const _this = this;
  const timerId = setInterval(function () {
    if (time.value === 0) {
      verifyCodeText.value = "重新获取验证码";
      verifyDisabled.value = false;
      clearInterval(timerId);
    } else {
      time.value--;
      verifyDisabled.value = true;
      verifyCodeText.value = time.value + "s后重新获取";
    }
  }, 1000);
};
// 图片验证时，判断是否验证成功，登录按钮是否可以点击
const passedImageDrag = ref(true);
// 图片验证成功后，@ok调用的方法
const passTologin = () => {
  passedImageDrag.value = false;
};
const dragClose = () => {
  status.value = 0;
};
</script>

<style scoped lang="scss">
.main {
  width: 100%;
  height: 100%;
  // background: url('~@/assets/img/Slice 112@2x.png');
  background: url("../../assets/image/background@2x.png") no-repeat;
  background-size: cover;
  position: relative;
  .top {
    padding-top: 28px;
    padding-left: 47px;
    display: flex;
    flex-direction: row;
    .logo {
      width: 153px;
      height: 52px;
      background: url("../../assets/image/logo@2x.png") no-repeat;
      background-size: cover;
    }
    .title {
      width: 185px;
      height: 37px;
      margin-left: 10px;
      margin-top: 10px;
      background: url("../../assets/image/CRM@2x.png") no-repeat;
      background-size: cover;
    }
  }
  .loginDiv {
    position: absolute;
    right: 167px;
    top: 343px;
    width: 301px;
    height: 284px;
    padding-top: 20px;
    background-color: #ffffff;
    opacity: 87%;
    padding: 20px 26px 0 26px;
    .verifyInput {
      width: 183px;
    }
    .verifyButton {
      width: 110px;
      height: 40px;
      bor-radius: 0px;
      font-size: 14px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
    }
    .disabledVerify {
      border: 1px solid $lightGray;
      color: $gray;
    }
    .activeVerify {
      border: 1px solid $themeBlue;
      color: $themeBlue;
    }
    .login {
      margin-top: 29px;
      width: 100%;
      height: 40px;
      background-color: $themeBlue;
      color: #fff;
      font-size: 14px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
    }
    .verifyImage {
      .dragImage {
        width: 300px;
        height: 200px;
        background-color: #fff;
        // padding-top: 40px;
        margin-bottom: 20px;
        margin-top: 10px;
      }
    }
    :deep(.el-input) {
      height: 40px;
      margin-top: 16px;
      .el-input__wrapper {
        box-shadow: 0 0 0 0px
          var(--el-input-border-color, var(--el-border-color)) inset;
        cursor: default;
        font-family: SourceHanSansCN, SourceHanSansCN;
        .el-input__inner {
          cursor: default !important;
          border-bottom: 1px solid #d5d5d5;
          font-size: 16px;
        }
        .el-input__inner::placeholder {
          font-size: 14px;
          font-family: SourceHanSansCN, SourceHanSansCN;
          font-weight: 400;
          color: #b6bcc2;
        }
      }
    }
  }
  :deep(.el-tabs__nav-wrap) {
    line-height: 60px;
    .el-tabs__nav-scroll {
      display: flex;
      justify-content: center;

      .el-tabs__item {
        align-items: flex-start;
        line-height: 24px;
        font-family: "SourceHanSansCN, SourceHanSansCN";
        font-size: 16px;
        font-weight: 500;
      }
      .el-tabs__nav-wrap::after {
        background-color: $lightGray;
      }
      .el-tabs__item.is-active,
      .el-tabs__item:hover {
        color: $themeBlue;
      }
    }
  }
}
</style>
